<template>
    <div class="headerk">
        <div class="photok">
            <div>
                <span class="shouyek">首页/学习广场</span>
            </div>
            <h1 class="peoplek"> 学习广场 </h1>
        </div>
        <div class="containerk">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="常规课程(10)" name="first">
                    <el-input v-model="input" style="width: 240px" placeholder="输入课程名称/课程ID/讲师" />
                    <el-button :icon="Search" class="kSearch" />
                    <el-space wrap :size="40">
                        <Card v-for="item in useData.theHome" :name="item.name" :desc="item.currDesc"
                            :img="item.iconPath" :time1="item.startTeachingTime" :time2="item.startTeachingTime"
                            :id="item.currNo" class="kcard" />
                    </el-space>
                </el-tab-pane>
                <el-tab-pane label="SRP(0)" name="second">
                    <el-input v-model="input" style="width: 240px" placeholder="输入课程名称/课程ID/讲师" />
                    <el-button :icon="Search" class="kSearch" />
                    <div> <span class="nei2">暂无课程</span> </div>
                </el-tab-pane>
                <el-tab-pane label="比赛(0)" name="third">
                    <el-input v-model="input" style="width: 240px" placeholder="输入课程名称/课程ID/讲师" />
                    <el-button :icon="Search" class="kSearch" />
                    <div> <span class="nei2">暂无课程</span> </div>
                </el-tab-pane>
                <el-tab-pane label="实训(0)" name="fourth">
                    <el-input v-model="input" style="width: 240px" placeholder="输入课程名称/课程ID/讲师" />
                    <el-button :icon="Search" class="kSearch" />
                    <div> <span class="nei2">暂无课程</span> </div>
                </el-tab-pane>
                <el-tab-pane label="自主学习(0)" name="fifth">
                    <el-input v-model="input" style="width: 240px" placeholder="输入课程名称/课程ID/讲师" />
                    <el-button :icon="Search" class="kSearch" />
                    <div> <span class="nei2">暂无课程</span> </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<style scoped>
.shouyek {
    left: 100px;
    top: 60px;
    position: absolute;
    color: white;
}

.peoplek {
    left: 100px;
    top: 100px;
    position: absolute;
    color: white;
}

.cart {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: left;
    font-weight: 500;
    font-size: small;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 0px;
}

.containerk {
    position: absolute;
    top: 200px;
    width: 100%;
    padding: 30px;
}

.headerk {
    position: absolute;
    top: 5%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.photok {
    position: absolute;
    height: 200px;
    width: 100%;
    background-image: url(https://codelover.club/static/img/courseBg.43bcf71c.png);
}

.nei2 {
    font-size: 18px;
    color: black;
}

.kcard {
    width: 400px;
}

.kcard:hover {
    transition: all 0.5s;
    transform: perspective(50px) translateZ(5px);
}
</style>

<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus';
import { ref, onMounted } from 'vue'; const activeName = ref('first');
import useDataStore from "../stores/Data";
import { Search } from '@element-plus/icons-vue'
import Card from '../components/Card.vue';
const input = ref('')
const useData = useDataStore()
onMounted(() => {
    useData.getHomeData()
})

const handleClick = (tab: TabsPaneContext, event: Event) => { console.log(tab, event); }; 
</script>